<template>
	<view class="wrapper">
		<view class="head">
			<view class="important">
				<view class="stars_t">*</view>
				<view class="stars_t">*</view>
				<view class="stars_t">*</view>
				<!-- <view class="stars_t">*</view> -->
			</view>
			<view class="set_border">
				<view class="user_head" @tap="UploadifyAvatarServlet">
					<view class="allFont">头像</view>
					<dimg :src="'' | avatar" mode="" class="users_head"></dimg>
					<image src="../../static/user/right_arr.png" mode="" class="right_arr" @tap="$open('')"></image>
				</view>
				<view class="user_name setFlex" @tap="$open('./username')">
					<view class="allFont">昵称</view>
					<view class="space-bet">
						<view class="user_name last_font">{{ userinfo.nickname }}</view>
						<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
					</view>
				</view>
				<picker mode="selector" :range="sexList" @change="sexChange" :value="userinfo.sex">
					<view class="user_sex setFlex">
						<view class="allFont">性别</view>
						<view class="space-bet">
							<view class="user_sex last_font">{{ userinfo.sex == 0 ? '女' : '男' }}</view>
							<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
						</view>
					</view>
				</picker>
				<dlDate mode="date" @getData="timeChange" :maxSelect="maxSelect" v-if="maxSelect!=''">
					<view class="user_birth setFlex">
						<view class="allFont">出生日期</view>
						<view class="space-bet">
							<view class="user_birth last_font">{{ userinfo.birthday | birtime }}</view>
							<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
						</view>
					</view>
				</dlDate>
				<!-- <view class="user_area setFlex last_box" @tap="$open('./userarea')">
					<view class="allFont">居住地</view>
					<view class="space-bet">
						<view class="user_birth last_font">徐州市</view>
						<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
					</view>
				</view> -->
			</view>
		</view>

		<view class="foot">
			<view class="important">
				<view class="stars_b">*</view>
				<view class="stars_b">*</view>
				<view class="stars_b">*</view>
			</view>
			<view class="set_border">
				<view class="user_erweima setFlex" @tap="$open('./user_erweima')">
					<view class="allFont">我的二维码</view>
					<view class="space-bet">
						<image src="../../static/user/erweima.png" mode="" class="erweima"></image>
						<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
					</view>
				</view>

				<view class="user_phone setFlex">
					<view class="allFont">手机号</view>
					<view class="space-bet">
						<view class="user_birth last_font" style="padding-right: 40rpx;">{{ telephone }}</view>
					</view>
				</view>
				<view class="user_callNumber setFlex last_box" @tap="$open('./user_com_nub')">
					<view class="allFont">通讯号</view>
					<view class="space-bet">
						<view class="user_birth last_font">{{ account }}</view>
						<image src="../../static/user/right_arr.png" mode="" class="right_arr"></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import dlDate from '../../components/dy-Date/dy-Date.vue';
import {uploadUrl} from '../../common/config.js'
export default {
	data() {
		return {
			userinfo: '',
			sexList: ['女', '男'],
			telephone: '',
			maxSelect: '',
			account:''
		};
	},
	components: { dlDate },
	onShow() {
		this.telephone = uni.getStorageSync('telephone');
		this.userinfo = uni.getStorageSync('userinfo');
		let date = new Date();
		const Y = date.getFullYear() + '/';
		const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '/';
		const D = (date.getDate()  < 10 ? '0' + date.getDate() : date.getDate())
		this.maxSelect = Y + M + D;
		this.userGet()
	},
	methods: {
		UploadifyAvatarServlet(){
			let that=this
			uni.showLoading({
				title:'拼命上传中'
			})
			uni.chooseImage({
				count:1,
			    success: (chooseImageRes) => {
			        const tempFilePaths = chooseImageRes.tempFilePaths;
			        uni.uploadFile({
			            url: uploadUrl+that.apiList.UploadifyAvatarServlet, //仅为示例，非真实的接口地址
			            filePath: tempFilePaths[0],
			            name: 'file',
			            formData: {
			                'userId': uni.getStorageSync('userinfo').userId
			            },
			            success: (uploadFileRes) => {
							uni.hideLoading()
							// if(JSON.parse(uploadFileRes.data).resultCode==1){
								that.$sToast('头像修改成功')
								that.$back(1,1500)
							// }
			            }
			        });
			    }
			});
		},
		// 回显用户信息
		userGet(){
			this.$ajax(this.apiList.userGet).then(res => {
				this.account=res.data.account
			});
		},
		// 选择生日事件
		timeChange(e) {
			this.userinfo.birthday = new Date(e).getTime() / 1000;
			this.updateUser();
		},
		// 选择性别事件
		sexChange(e) {
			console.log(e);
			this.userinfo.sex = e.detail.value;
			this.updateUser();
		},
		updateUser() {
			const { nickname, sex, birthday } = this.userinfo;
			this.$ajax(this.apiList.userUpdate, {
				sex: sex,
				birthday: birthday
			}).then(res => {
				uni.setStorageSync('userinfo', this.userinfo);
			});
		}
	}
};
</script>

<style>
.wrapper {
	background: #f3f3f3;
	position: relative;
}

.head {
	/* height: 571rpx; */
	background: rgba(255, 255, 255, 1);
	border-bottom: 1rpx solid #e0e0e0;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
}

.user_head {
	display: flex;
	flex-direction: row;
	height: 150rpx;
	align-items: center;
	border-bottom: 1px solid #e0e0e0;
}

.user_head .users_head {
	width: 120rpx;
	height: 120rpx;
	border-radius: 50%;
	margin: 0rpx 0 0 454rpx;
	overflow: hidden;
}

.right_arr {
	width: 12rpx;
	height: 24rpx;
	margin-right: 30rpx;
	margin-left: 20rpx;
}

.allFont {
	height: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}

.set_border {
	width: 696rpx;
}

.important {
	display: flex;
	flex-direction: column;
	color: #ff1f2f;
	font: 32rpx/32rpx '';
	margin-right: 12rpx;
}

.important .stars_t:nth-child(1) {
	margin-top: 185rpx;
}

.important .stars_t:nth-child(2) {
	margin-top: 66rpx;
}

.important .stars_t:nth-child(3) {
	margin-top: 60rpx;
}

.important .stars_t:nth-child(4) {
	margin-top: 72rpx;
}

.setFlex {
	display: flex;
	flex-direction: row;
	height: 104rpx;
	align-items: center;
	border-bottom: 1rpx solid #e0e0e0;
	justify-content: space-between;
}

.last_font {
	height: 44rpx;
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
}

.space-bet {
	display: flex;
	flex-direction: row;
	align-items: center;
}

.last_box {
	border: none;
}

.foot {
	height: 314rpx;
	background: rgba(255, 255, 255, 1);
	border-bottom: 1rpx solid #e0e0e0;
	border-top: 1rpx solid #e0e0e0;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin-top: 20px;
}

.erweima {
	width: 30rpx;
	height: 30rpx;
}

.important .stars_b:nth-child(1) {
	margin-top: 40rpx;
}

.important .stars_b:nth-child(2) {
	margin-top: 60rpx;
}

.important .stars_b:nth-child(3) {
	margin-top: 60rpx;
}

.alert-wrapper {
}

.cos_box {
	position: absolute;
	width: 674rpx;
	height: 273rpx;
	background: rgba(255, 255, 255, 1);
	border-radius: 12px;
	margin: 515rpx 38rpx 546rpx 38rpx;
	display: flex;
	flex-direction: column;
}

.aler_head {
	height: 33rpx;
	font-size: 34rpx;
	font-weight: bold;
	color: rgba(51, 51, 51, 1);
	text-align: center;
	margin-top: 37rpx;
}

.radio text {
	height: 32rpx;
	font-size: 34rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
}
.w3h3 {
	transform: scale(0.6);
	margin-left: 30rpx;
}
.mtop {
	margin-top: 38rpx;
}
</style>
